<template>
<div>

  <table class="DarkLines">
    <tbody>
    <tr class="FieldTitle">
      <td>#</td>
      <td>日期</td>
      <td>身高</td>
      <td>体重</td>
      <td>BMI</td>
      <td>操作</td>
    </tr>
    <tr class="null" v-if="todos.length === 0">
      <td colspan="6">暂无数据</td>
    </tr>
    <tr v-else class="FieldBody"
        v-for="(item ,index) of todos"
        :key="index"
    >
      <td>{{ index + 1 }}</td>
      <td>{{formatDate(item.createdAt)}}</td>
      <!--      <td>{{item.createdAt}}</td>-->
      <td>{{ item.height }}</td>
      <td>{{ item.weight }}</td>
      <td>{{ item.bmi }}</td>
      <td><a @click="del(item.objectId)" href="javascript:void (0)" :style="{color}" title="删除">删除</a></td>
    </tr>
    </tbody>
  </table>

</div>
</template>

<script>
// import axios from "axios";

export default {
  name: "TableBmi",
  data(){
    return{
      color:'red',
    }
  },
  props:{
    todos: {
      type:Array,
      default:function () {
        return []
      }
    },

  },
  methods:{
    del(id){
      this.$emit('remove',id)
    },

    // 转换时间
    formatDate(time) {
      let date = new Date(time)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },

  }
}
</script>

<style scoped>
@import "~_layui@2.6.8@layui/dist/css/layui.css";

.null{
  height: 70px;
  line-height: 70px;
  color: #2AC38A;
  font-size: 20px;
}

.DarkLines{
  text-align: center;
  width: 99%
}
.FieldTitle{
  background: #5bafff;
  height: 30px;
  color: #fff;
  font-size: 17px;
}

.FieldBody{
  height: 30px;
}

</style>